import {Select, message, Button} from 'antd'
import React, {useState, useEffect} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {ArrowDownOutlined} from '@ant-design/icons'
import CustomTable from '@/components/Table'
import {carStatus} from '@/pages/carMessage/dict'
import styles from '../index.less'
import SearchForm from '@/components/SearchForm'
import {getCarTypeList} from '@/service/carMessage/list'
import {getAllocationcarList} from '@/service/storage/allocation'
import {getOutCarPage} from '@/service/storage/inAtorage'
import {downloadDocumentUrl} from '@/service/common/download'
import {modelSeriesFun} from '@/utils/common'

interface DataType {
	outCarNo: string
	frameNo: string
	id?: string
	goodsType?: string
	vin?: string
	number?: string
	carFullName?: string
	goodsQuantity?: number
	carId?: string
}

const formItemLayout = {
	labelCol: {flex: '120px'},
	wrapperCol: {flex: '1'},
}

const materialTable = (props: any) => {
	const {allocationId} = props
	const [total, setTotal] = useState()
	const [loading, setLoading] = useState(false)
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [carTypeList, setCarTypeList] = useState<any>([])
	const [dataSourse, setDataSourse] = useState<any>([])
	const [newDataSourse, setNewDataSourse] = useState<any>([])
	const [searchData, setSearchData] = useState({})

	// 获取品牌车系
	const onCarTypeListFun = () => {
		getCarTypeList().then((res: any) => {
			if (res?.success) {
				setCarTypeList(modelSeriesFun(res.data))
			}
		})
	}
	useEffect(() => {
		onCarTypeListFun()
	}, [])

	/** 获取调拨车辆列表 */
	const getData = () => {
		setLoading(true)
		getAllocationcarList({allocationId, ...params, ...searchData})
			.then((res: any) => {
				if (res?.success) {
					setDataSourse(res?.data?.records)
					setNewDataSourse(res?.data?.records)
					setTotal(res?.data?.total)
					setLoading(false)
				} else {
					setLoading(false)
				}
			})
			.catch((err) => {
				setDataSourse([])
				setNewDataSourse([])
				message.error(err)
				setLoading(false)
			})
	}

	useEffect(() => {
		if (dataSourse?.length) {
			dataSourse?.forEach((item: {frameNo: string}, index: number) => {
				/** 循环调用车辆列表获取调入信息 */
				getOutCarPage({
					current: 1,
					size: 10,
					vin: item?.frameNo,
				}).then((result: any) => {
					const carData: any = result?.data?.records?.[0]
					if (result?.success && Number(carData?.carStatus) !== 10) {
						const newData = [...dataSourse]
						newData[index].inCarNo = carData?.number
						newData[index].inWarehouse = carData.warehouseName
						newData[index].inCarStatus = carData.carStatus
						setNewDataSourse(newData)
					}
				})
			})
		}
	}, [dataSourse])
	useEffect(() => {
		getData()
	}, [params])

	const columns: ColumnsType<DataType> = [
		{
			title: '车架号',
			dataIndex: 'frameNo',
			align: 'center',
			width: 140,
		},
		{
			title: '品牌/车系/车型',
			dataIndex: 'carModel',
			align: 'center',
			width: 160,
		},
		{
			title: '调出车牌号',
			dataIndex: 'outCarNo',
			align: 'center',
			width: 110,
		},
		{
			title: '调出仓库',
			dataIndex: 'outWarehouse',
			align: 'center',
			width: 110,
		},
		{
			title: '调出车辆状态',
			dataIndex: 'outCarStatus',
			align: 'center',
			width: 140,
			render: (text) => (
				<Select
					value={Number(text)}
					disabled
					fieldNames={{value: 'key', label: 'label'}}
					options={carStatus}
				/>
			),
		},
		{
			title: '调入车牌号',
			dataIndex: 'inCarNo',
			align: 'center',
			width: 110,
			render: (text) => text || '-',
		},
		{
			title: '调入仓库',
			dataIndex: 'inWarehouse',
			align: 'center',
			width: 110,
			render: (text) => text || '-',
		},
		{
			title: '调入车辆状态',
			dataIndex: 'inCarStatus',
			align: 'center',
			width: 140,
			render: (text) => (
				<Select
					value={text ? Number(text) : '-'}
					disabled
					fieldNames={{value: 'key', label: 'label'}}
					options={carStatus}
				/>
			),
		},
	]

	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'select',
					key: 'carModel',
					name: 'carModel',
					label: '品牌/车系/车型',
					keys: 'fullName',
					title: 'fullName',
					items: carTypeList,
					placeholder: '请选择',
				},
				{
					type: 'input',
					label: '车架号',
					name: 'frameNo',
					key: 'frameNo',
					placeholder: '请输入',
				},
				{
					type: 'input',
					label: '车牌号',
					name: 'carNo',
					key: 'carNo',
					placeholder: '请输入',
				},
			],
		},
	]
	const onFinish = (values: any) => {
		setSearchData(values)
		setParams({
			current: 1,
			size: 10,
		})
	}
	const onReset = () => {
		setSearchData({})
		setParams({
			current: 1,
			size: 10,
		})
	}

	return (
		<div className={styles.vehicleTable}>
			<div className={styles.title}>
				调拨车辆信息
				<span>已选择调拨车辆数量/辆：{total}</span>
				<Button
					icon={<ArrowDownOutlined />}
					className={styles.import}
					ghost
					size="small"
					onClick={() => {
						downloadDocumentUrl({
							resourceId: '138',
							queryDesc: '调拨-详情导出,resourceId:138',
							queryParam: {allocationId, ...searchData},
						})
					}}>
					导出
				</Button>
			</div>
			<div className={styles.search}>
				<SearchForm
					onFinish={onFinish}
					onReset={onReset}
					formItems={formItems}
					formLayout={formItemLayout}
					btnStatus={false}
				/>
			</div>
			{newDataSourse && (
				<CustomTable
					params={params}
					columns={columns}
					total={total}
					pagination
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={newDataSourse}
				/>
			)}
		</div>
	)
}

export default materialTable
